<template>
  <div class="app-container" v-loading="loading">
    <el-tabs v-model="queryParams.grouping" @tab-click="getList">
      <el-tab-pane label="api密钥" name="apiSecretKey">
      </el-tab-pane>
      <el-tab-pane label="api安全" name="apiSecure">
      </el-tab-pane>
    </el-tabs>

    <el-form :model="config" ref="form" size="small" class="api-form">
      <el-form-item v-for="(configItem,index) in config.configList" :key="index" :label="configItem.configName" v-if="configItem.configKey!=='apiSecurity.privateKey'">
        <br/>
        <el-input v-if="configItem.type === 0" :readonly="queryParams.grouping === 'apiSecretKey'" v-model="configItem.configValue" :placeholder="'请输入'+configItem.configName"></el-input>
        <el-input v-else-if="configItem.type === 2" :readonly="queryParams.grouping === 'apiSecretKey'" type="textarea" :autosize="{ minRows: 2, maxRows: 8}" v-model="configItem.configValue" :placeholder="'请输入'+configItem.configName"></el-input>
        <FileUpload v-else-if="configItem.type === 1" :is-show-tip="false" :limit="1" v-model="configItem.configValue"></FileUpload>
      </el-form-item>
      <div class="dialog-footer" >
        <el-button type="primary" size="mini" :loading="loading" v-if="queryParams.grouping !== 'apiSecretKey'" @click="submitForm">提 交</el-button>
        <el-button type="primary" size="mini" :loading="loading" v-else @click="submitForm">生 成</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>

import { addApiConfig, generateKeyPair, listApiConfig } from '@/api/system/apiConfig'

export default {
  name: "ApiConfig",
  data() {
    return {
      loading: false,
      queryParams:{
        grouping:"apiSecretKey",
      },
      config:{
        configList:[]
      },
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true
      listApiConfig(this.queryParams).then(response => {
        this.loading = false
        if (response.rows.length > 0) {
          this.config.configList = response.rows;
        } else {
          if (this.queryParams.grouping === "apiSecretKey") {
            this.config.configList = [
              {
                "configName": "用户编码",
                "configKey": "apiSecurity.userAppid",
                "configValue": "",
                "type": 0,
                "grouping": "apiSecretKey"
              },
              {
                "configName": "公钥",
                "configKey": "apiSecurity.publicKey",
                "configValue": "",
                "type": 2,
                "grouping": "apiSecretKey"
              },
              {
                "configName": "私钥",
                "configKey": "apiSecurity.privateKey",
                "configValue": "",
                "type": 2,
                "grouping": "apiSecretKey"
              }
            ];
          }else  if (this.queryParams.grouping === "apiSecure") {
            this.config.configList = [
              {
                "configName": "IP白名单",
                "configKey": "apiSecure.ip",
                "configValue": "",
                "type": 0,
                "grouping": "apiSecure"
              },
            ];
          } else {
            this.config.configList = []
          }
        }
      }).catch(() => {
        this.loading = false
      })
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.queryParams.grouping === 'apiSecretKey'){
            this.$confirm('确定要重新生成密钥串吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              generateKeyPair(this.config.configList).then(response=>{
                this.loading = false
                this.$message.success("生成成功");
                this.getList()
              }).catch(()=>{
                this.loading = false
              })
            }).catch(() => {
              this.loading = false
            })

          }else{
            addApiConfig(this.config.configList).then(response=>{
              this.loading = false
              this.$message.success("保存");
              this.getList()
            }).catch(()=>{
              this.loading = false
            })
          }
        }
      })
    }
  }
}
</script>
<!--<style lang="scss" scoped>-->
<!--.el-card {-->
<!--  width: 100%;-->
<!--  margin-bottom: 20px;-->
<!--}-->
<!--</style>-->

<style scoped lang="scss">
.app-container{
  .api-form{
    width: 350px;
  }
  .dialog-footer{
    display: flex;
    justify-content: flex-end;
  }
}

</style>
